<template>
  <nav>
    <div class="banxin">
      <ul class="tanxin nav-li">
        <router-link to="/" tag="li">推荐</router-link>
        <router-link to="/ranking" tag="li">排行榜</router-link>
        <router-link to="/gedan" tag="li">歌单</router-link>
        <router-link to="/diantai" tag="li">主播电台</router-link>
        <router-link to="/geshou" tag="li">歌手</router-link>
        <router-link to="/newmuse" tag="li">新碟上架</router-link>
      </ul>
    </div>
  </nav>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>
 
<style lang = "less" scoped>
@import "@/assets/base.less";
nav {
  height: 35px;
  background-color: @red;
  ul {
    color: #fff;
    width: 550px;
    margin-left: 200px;
    justify-content: center;
    li {
      height: 20px;
      border-radius: 15px;
      text-align: center;
      line-height: 20px;
      margin-top: 2px;
      padding: 5px 10px 5px 10px;
      color: #fff;
      &:hover {
        background-color: #9b0909;
      }
    }
  }
}
</style>